import React from 'react';

import { ReactComponent as Book } from '@/assets/images/profile/Book.svg';
import { ReactComponent as Wallet } from '@/assets/images/profile/Wallet.svg';
import { BackButton } from '@/features/BackButton';
import { innerUrls } from '@/shared/constants';
import { ReactComponent as Rating1 } from '@/shared/icons/Rating1.svg';
import { ReactComponent as Rating2 } from '@/shared/icons/Rating2.svg';
import { ReactComponent as Rating3 } from '@/shared/icons/Rating3.svg';
import { ReactComponent as Rating4 } from '@/shared/icons/Rating4.svg';
import { ReactComponent as Rating5 } from '@/shared/icons/Rating5.svg';
import { ReactComponent as Star } from '@/shared/icons/star.svg';
import { BoughtCourseTabVariants } from '@/shared/interfaces';
import { OrderV2Dto } from '@/shared/interfaces/generated';
import { getImageUrl } from '@/shared/lib';
import { Button, ButtonVariants, Loader } from '@/shared/ui';
import Image from 'next/image';
import { useRouter } from 'next/router';

import cs from './ActionCard.module.scss';

const icons = [<Rating1 />, <Rating2 />, <Rating3 />, <Rating4 />, <Rating5 />];

export const ActionCard = ({
  course,
  rate,
  isLoading,
  tab,
}: {
  course?: OrderV2Dto;
  isLoading?: boolean;
  rate: number;
  tab: BoughtCourseTabVariants;
}) => {
  const router = useRouter();
  const titleRef = React.useRef<HTMLParagraphElement>(null);
  const { id } = router.query;
  React.useEffect(() => {
    const title = titleRef.current;
    if (!title) {
      return;
    }
    const titleBlock = title.parentElement;
    if (!titleBlock) {
      return;
    }
    if (title.scrollWidth + 25 > titleBlock.offsetWidth) {
      title.style.background = 'linear-gradient(to right, rgb(0, 0, 0) 85%, rgba(0, 186, 187, 0) 100%)';
      title.style.color = 'transparent';
    } else {
      title.style.background = 'white';
      title.style.color = 'black';
    }
    // @ts-ignore
    title.style['-webkit-background-clip'] = 'text';
  }, []);

  const firstCourse = course?.items?.[0];
  return (
    <>
      <div className={cs.floating_card}>
        <BackButton
          className={cs.back_button}
          onClick={() => router.push(innerUrls.profile('purchases'))}
          text="Покупки"
        />
        {isLoading ? (
          <Loader className={cs.card_image} />
        ) : (
          <div className={cs.card_image}>
            <Image
              alt={firstCourse?.title || 'title'}
              fill
              priority
              sizes="(max-width: 768px) 100vw, (max-width: 1024px) 100vw, (max-width: 1366px) 35vw, 45vw"
              src={getImageUrl(firstCourse?.product.image)}
            />
          </div>
        )}

        <div className={cs.card_buttons_bought} style={{ gap: '4px' }}>
          <div className={cs.titleBlock}>
            <div className={cs.title} ref={titleRef}>
              {firstCourse?.title ? <p>{firstCourse.title}</p> : <Loader borderRadius={8} height={26} width={120} />}
            </div>
            {isLoading ? (
              <Loader borderRadius={8} height={16} width={120} />
            ) : (
              <Button
                className={cs.about}
                data-testid={`link-course-${firstCourse?.productId}`}
                href={innerUrls.course(firstCourse?.product?.course.id as number)}
                link
                target="_blank"
                variant={ButtonVariants.Link}
              >
                О материале
              </Button>
            )}
          </div>
          <Button
            className={`${cs.boughtButton} ${tab === 'info' && cs.active}`}
            href={innerUrls.boughtCourse('info', Number(id))}
            link
          >
            <Book /> Читать
          </Button>
          {!rate ? (
            <Button
              className={`${cs.boughtButton} ${tab === 'review' && cs.active}`}
              data-testid="button-create_rating"
              href={innerUrls.boughtCourse('review', Number(id))}
              link
            >
              <Star />
              Оставить отзыв
            </Button>
          ) : (
            <Button
              className={`${cs.boughtButton} ${tab === 'review' && cs.active}`}
              data-testid="button-update_rating"
              href={innerUrls.boughtCourse('review', Number(id))}
              link
            >
              {icons[rate - 1]}
              Изменить отзыв
            </Button>
          )}
          <Button
            className={`${cs.boughtButton} ${tab === 'purchase' && cs.active}`}
            data-testid="link-about_order"
            href={innerUrls.boughtCourse('purchase', Number(id))}
            link
          >
            <Wallet />О покупке
          </Button>
        </div>
        <div className={cs.card_actions}>
          <BackButton className={cs.back_mobile} />
        </div>
      </div>
    </>
  );
};
